<template>
  <div class="mini">
    <back-button @click="backAction" />
    <div class="rpg-game-container">
      <h2>RPG游戏状态机演示</h2>

      <!-- 当前游戏状态显示 -->
      <div class="game-status">
        <h3>当前状态: {{ currentState }}</h3>
        <p>可能的状态转换: {{ possibleTransitions.join(', ') }}</p>
      </div>

      <!-- 游戏控制按钮 -->
      <div class="game-controls">
        <button @click="startExploration">开始探索</button>
        <button @click="triggerCombat">触发战斗</button>
        <button @click="openMenu">打开菜单</button>
        <button @click="openInventory">打开物品栏</button>
        <button @click="resetGame">重置游戏</button>
      </div>

      <!-- 键盘快捷键提示 -->
      <div class="keyboard-hints">
        <p>键盘快捷键:</p>
        <ul>
          <li>Escape: 打开/关闭菜单</li>
          <li>C: 打开角色面板</li>
          <li>I: 打开物品栏</li>
          <li>1: 开始探索</li>
          <li>2: 触发战斗</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import backButton from '@/common/components/back-button.vue'
import { RPGLogic } from './logic'
import { GAME_STATES } from './logic/types'

const router = useRouter()
const backAction = () => {
  router.back()
}

// 游戏状态响应式数据
const currentState = ref<string>('未初始化')
const possibleTransitions = ref<string[]>([])
let rpgLogic: RPGLogic | null = null

// 初始化游戏
const initGame = () => {
  // 创建RPGLogic实例
  rpgLogic = new RPGLogic()

  // 初始化游戏数据（模拟暗黑破坏神2风格的游戏数据）
  const initialGameData = {
    playerData: {
      name: '暗黑勇士',
      level: 1,
      health: 100,
      mana: 50,
      class: '野蛮人',
      inventory: [],
      equipment: {
        weapon: '生锈的剑',
        armor: '破旧的皮甲'
      }
    },
    worldData: {
      currentMap: '罗格营地',
      enemies: [],
      npcs: ['阿卡拉', '卡夏', '瓦瑞夫']
    },
    initialState: GAME_STATES.EXPLORATION // 使用GameState类型而不是字符串
  }

  // 初始化游戏
  const initialState = rpgLogic.initializeGameData(initialGameData)

  // 添加状态变化监听
  rpgLogic.onStateChange((fromState, toState) => {
    console.log(`游戏状态变化: ${fromState} -> ${toState}`)
    updateGameStatus()

    // 可以在这里根据状态变化执行不同的逻辑
    switch (toState) {
      case 'COMBAT':
        console.log('战斗开始！准备迎战敌人')
        break
      case 'DEATH':
        console.log('你已死亡，请选择复活方式')
        break
    }
  })

  // 更新游戏状态显示
  updateGameStatus()

  console.log('RPG游戏初始化完成')
}

// 更新游戏状态显示
const updateGameStatus = () => {
  if (rpgLogic) {
    const snapshot = rpgLogic.getGameStateSnapshot()
    currentState.value = snapshot.currentState
    possibleTransitions.value = snapshot.possibleTransitions
  }
}

// 游戏控制函数
const startExploration = () => {
  // rpgLogic?.triggerExploration()
}

const triggerCombat = () => {
  rpgLogic?.triggerCombat()
}

const openMenu = () => {
  //rpgLogic?.triggerMenu()
}

const openInventory = () => {
  //  rpgLogic?.triggerInventory()
}

const resetGame = () => {
  if (rpgLogic) {
    rpgLogic.reset()
    initGame()
  }
}

// 键盘事件处理
const handleKeyDown = (event: KeyboardEvent) => {
  if (rpgLogic) {
    // 传递键盘输入给游戏逻辑
    rpgLogic.handleKeyInput(event.key, true)

    // 额外的快捷操作
    switch (event.key) {
      case '1':
        startExploration()
        break
      case '2':
        triggerCombat()
        break
    }
  }
}

const handleKeyUp = (event: KeyboardEvent) => {
  if (rpgLogic) {
    rpgLogic.handleKeyInput(event.key, false)
  }
}

// 鼠标事件处理（简化版）
const handleMouseClick = (event: MouseEvent) => {
  if (rpgLogic) {
    rpgLogic.handleMouseInput(
      'click',
      { x: event.clientX, y: event.clientY },
      'left')
  }
}

// 组件挂载时初始化游戏
onMounted(() => {
  initGame()

  // 添加事件监听器
  window.addEventListener('keydown', handleKeyDown)
  window.addEventListener('keyup', handleKeyUp)
  window.addEventListener('click', handleMouseClick)
})

// 组件卸载时清理
onUnmounted(() => {
  // 移除事件监听器
  window.removeEventListener('keydown', handleKeyDown)
  window.removeEventListener('keyup', handleKeyUp)
  window.removeEventListener('click', handleMouseClick)

  // 清理游戏逻辑
  rpgLogic = null
})
</script>

<style scoped>
.mini {
  padding: 20px;
  font-family: 'Arial', sans-serif;
  min-height: 100vh;
}

.rpg-game-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #1a1a2e;
  color: #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.game-status {
  background-color: #16213e;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.game-status h3 {
  color: #00b4d8;
  margin-top: 0;
}

.game-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.game-controls button {
  padding: 10px 15px;
  background-color: #0077b6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.game-controls button:hover {
  background-color: #023e8a;
}

.keyboard-hints {
  background-color: #16213e;
  padding: 15px;
  border-radius: 6px;
}

.keyboard-hints ul {
  margin: 10px 0;
  padding-left: 20px;
}

.keyboard-hints li {
  margin-bottom: 5px;
}
</style>